<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="涉农主体详情"></u-navbar> -->
		<view class="fixed-top bg-white">
			<view class="dfes pl-3 pr-3 mt-2">
				<view v-if="newlist.abnormal === false" class="text-333">{{newlist.username}}</view>
				<view v-if="newlist.abnormal === true" class="text-BD3124">{{newlist.username}}</view>
				<view v-if="newlist.abnormal === true" class="ml-2 bg-F5C9C5 text-BD3124 pl-1 pr-1 rounded ">异常</view>
			</view>
			<view class="dfes mt-2 ml-3 mr-3">
				<view class="mr-2 p font-12 rounded bg-FCE07F" v-for="(label, index) in agricultureLabel" :key="index">
					<view class="text-FFC251">{{ label }}</view>
				</view>
			</view>
			<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index" @click="changeTab(index)"
				:key="index">
				<view class="font-16 dfex" :class="tabIndex === index ? 'text-8ED0F2 active':''">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view style="margin-top: 120px;">
			<!-- 	<swiper :current="tabIndex" @change="onChangeTab" style="height: 100vh;">
				<swiper-item> -->
			<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 0px);" :show-scrollbar="false">
				<view class="" v-if="tabIndex === 0">
					<u-field v-model="newlist.enterpriseName" :border-bottom="false" label="企业名称：" label-width="150"
						:disabled="true" :field-style="placeholderStyle">
					</u-field>
					<u-field v-model="newlist.phone" :border-bottom="false" label="手机号：" label-width="130"
						:disabled="true" :field-style="placeholderStyle"></u-field>

					<u-field v-model="newlist.unifiedCreditCode" :border-bottom="false" label="统一信用代码："
						label-width="200" :disabled="true" :field-style="placeholderStyle"></u-field>

					<u-field v-model="newlist.registeredCapital" :border-bottom="false" :disabled="true"
						label-width="150" label="注册资本：" :field-style="placeholderStyle"></u-field>

					<u-field v-model="newlist.type" :border-bottom="false" :disabled="true" label="类型：" label-width="90"
						:field-style="placeholderStyle"></u-field>
					<u-field v-model="newlist.legalRepresentative" :border-bottom="false" label="法定代表人："
						:disabled="true" label-width="170" :field-style="placeholderStyle">
					</u-field>
					<u-field v-model="newlist.foundedTime" :border-bottom="false" label="成立日期：" label-width="140"
						:disabled="true" :field-style="placeholderStyle"></u-field>

					<u-field v-model="newlist.businessTerm" :border-bottom="false" label="营业期限：" label-width="140"
						:disabled="true" :field-style="placeholderStyle"></u-field>

					<u-field v-model="newlist.address" :border-bottom="false" :disabled="true" label="主体地址："
						label-width="140" :field-style="placeholderStyle"></u-field>

					<u-field v-model="newlist.natureBusinessText" :border-bottom="false" :disabled="true" label="经营范围："
						label-width="140" :field-style="placeholderStyle"></u-field>
					<u-field v-model="newlist.createTime" :border-bottom="false" label-width="140" :disabled="true"
						label="注册时间：" :field-style="placeholderStyle"></u-field>
				</view>
				<view class="" v-if="tabIndex === 1">
					<view v-for="(item, index) in agriculture" :key="index" class="mb-5">
						<u-field v-model="item.baseName" :border-bottom="false" label="基地名称：" :disabled="true"
							:field-style="placeholderStyle" label-width="160">
						</u-field>
						<u-field v-model="item.contacts" :border-bottom="false" label="联系人：" :disabled="true"
							:field-style="placeholderStyle" label-width="120"></u-field>

						<u-field v-model="item.phone" :border-bottom="false" label="联系电话：" :disabled="true"
							:field-style="placeholderStyle" label-width="140"></u-field>

						<u-field v-model="item.baseAddress" :border-bottom="false" :disabled="true" label="基地位置："
							:field-style="placeholderStyle" label-width="140"></u-field>

						<u-field v-model="item.baseArea" :border-bottom="false" :disabled="true" label="基地面积(m²)："
							:field-style="placeholderStyle" label-width="200"></u-field>
						<u-field v-model="item.productIntroduce" :border-bottom="false" label="基地产品介绍：" :disabled="true"
							:field-style="placeholderStyle" label-width="200">
						</u-field>
						<view class="flex-y pl-3">
							<view>基地图片:</view>
							<u-lazy-load style="width: 145px;height: 100px;"
								:image="getFullImageUrl(item.basePhoto)"></u-lazy-load>
						</view>
					</view>
					<view v-if="agriculture.length === 0" class="text-center mt-3 mb-3">
						<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
						<view class="text-999999 font-15">暂时木有内容呀~~</view>
					</view>
				</view>
				<view class="" v-if="tabIndex === 2">
					<view class="px-3 tab-item" v-for="(item,index) in tabBar" :id="'tab'+index"
						@click="changeTabs(index)" :key="index">
						<view class="font-16 dfex" :class="tabBarIndex === index ? 'text-8ED0F2 active':''">
							{{item.typeName}}
						</view>
					</view>
					<view v-if="tabBar.length === 0" class="text-center mt-3 mb-3">
						<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
						<view class="text-999999 font-15">暂时木有内容呀~~</view>
					</view>
					<view v-if="productIn.length > 0">
						<view v-for="(item, index) in productIn" :key="index">
							<u-field v-model="item.productName" :border-bottom="false" label="产品名称：" :disabled="true"
								label-width="160">
							</u-field>
							<u-field v-model="item.baseName" :border-bottom="false" label="基地名称：" :disabled="true"
								label-width="160"></u-field>
						</view>
					</view>
				</view>
				<view class="" v-if="tabIndex === 3">
					<view class="flex-y pl-3 py-2 pr-3" v-for="(item,index) in papersManage" :key="index">
						<view class="pr-2">{{item.papersName}}:</view>
						<u-lazy-load style="width: 145px;height: 100px;"
							:image="getFullImageUrl(item.papersPhotoUrl)"></u-lazy-load>

					</view>
					<view v-if="tabBar.papersManage === 0" class="text-center mt-3 mb-3">
						<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
						<view class="text-999999 font-15">暂时木有内容呀~~</view>
					</view>
				</view>
				<view v-if="newlist.abnormal === true"
					class="icon-hao iconfont pl-3 pr-3 mt-5  bg-F5C9C5 text-BD3124 ml-3 mr-3 py-1 rounded-10  "> <text
						class="font-14 pl-2">该品牌企业已被加入黑名单！</text></view>
			</scroll-view>
			<!-- </swiper-item>
			</swiper> -->
		</view>
	</view>
</template>

<script>
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	import $H from '@/common/free-lib/request.js';
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		components: {
			ferrButton,
			freeConfirm
		},
		data() {
			return {
				mobile: '测试奢侈',
				placeholderStyle: {
					color: '#999'
				},

				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},
				form: {
					name: '',
					intro: ''
				},
				scrollinto: "",
				tabIndex: 0,
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				tabBars: [{
						"id": 1,
						"name": "主体信息",
					},
					{
						"id": 2,
						"name": "基地信息",
					},
					{
						"id": 3,
						"name": "产品信息",
					},
					{
						"id": 4,
						"name": "证件信息",
					},
				],
				tabBarIndex: 0,
				tabBar: [],
				newlist: '',
				papersManage: [],
				agriculture: [],
				agricultureLabel: [],
				productIn: []

			}


		},
		computed: {


		},

		onLoad(options) {
			const id = options.id;
			this.id = id;
			this.NewListDetail(id);
			this.newlist = [];
		},
		methods: {
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			NewListDetail(id) {
				$H.get('/brand/user/down/follow/queryById', {
					id: id
				}, {}).then(res => {
					this.newlist = res.result
					this.agricultureLabel = this.newlist.agricultureLabel.split(',').slice(0, 6)
				}).catch(error => {
					console.log(error)
				});
			},
			// 基地信息
			getBaseInformList(id) {
				$H.get(
					'/agriculture/baseInform/down/follow/list', {
						id: id
					}, {
						token: true
					}).then((res) => {
					this.agriculture = res.result.records
				})
			},

			//证件信息
			getPapersManageList(id) {
				$H.get(
					'/basisInform/papersManage/down/follow/list', {
						id: id
					}, {
						token: true,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					}).then((res) => {
					this.papersManage = res.result
				})
			},
			// 获取产品分类列表
			productType(id) {
				$H.get(
					'/basisInform/productType/down/queryAgricultureProductTypeList', {
						id: id
					}, {
						token: true,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					}).then((res) => {
					// 更新产品类型列表
					this.tabBar = res.result || [];
					// 默认选中第一个产品类型并获取产品信息列表
					// this.productTypeId = this.tabBar[0].id;
					if (this.tabBar && this.tabBar.length > 0) {
					    this.productTypeId = this.tabBar[0].id;
					} else {
					    console.error('TabBar is undefined or empty');
					}
					this.getProductInformList(id, this.productTypeId);
				});
			},

			// 获取产品信息列表
			getProductInformList(id, productTypeId) {
				// console.log(productTypeId, 'productTypeId');
				$H.get(
					'/agriculture/productInform/down/follow/list', {
						id: id,
						productTypeId: productTypeId
					}, {
						token: true,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					}).then((res) => {
					if (res.result) {
						this.productIn = res.result.records;
						// 处理产品信息
					} else {
						// 这里处理没有获取到有效结果的情况
						console.log('没有获取到产品信息');
					}
				});
			},

			// 切换产品类型
			changeTabs(index) {
				// 如果选择的是当前激活的产品类型，则不执行任何操作
				if (this.tabBarIndex === index) return;
				// 更新当前激活的产品类型索引
				this.tabBarIndex = index;
				// 设置滚动到的位置
				this.scrollinto = "tab" + index;
				// 获取选择的产品类型对应的产品信息列表
				const selectedProductTypeId = this.tabBar[index].id;
				this.getProductInformList(this.id, selectedProductTypeId);
			},


			changeTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollinto = "tab" + index;

				if (index === 3) {
					// 证件信息
					this.getPapersManageList(this.id);
				} else if (index === 2) {
					// 获取产品分类列表
					this.productType(this.id);
				} else if (index === 1) {
					// 基地信息
					this.getBaseInformList(this.id);

				}


			},
			// Handle tab change event
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}


	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 13px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>